<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>03_元素属性的操作</title>
		
		<!-- 元素  固定属性---清楚：元素是否可以用属性【w3c元素出现设置属性】 
		          附加属性---清楚：表单为主，附加属性checked、disabled....
			prop()                -----功能：与attr类似，附加属性，针对表单，默认选中
			removeProp()          -----功能：与removeAttr类似，附加属性，针对表单，移除选中
		-->
		<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<h1>prop()和removeProp()函数使用</h1>
		<input type="checkbox" id="myCheckBox" checked >
		<button id="getProBtn">获取属性</button>
		<button id="setProBtn">设置属性</button>
		<button id="removeProBtn">移除属性</button>
		<div id="output_three"></div>
		<!-- 复选框，默认选中 id="myCheckBox"
		     三个按钮  id="getProBtn"     获取属性
			          id="setProBtn"     设置属性
					  id="removeProBtn"  移除属性
			弹出显示文字： div id="output"
		 -->
		<script>
			/*  prop()  点击---获取属性---打印复选框的值
			                             复选框的值是： +变量
				prop("checked")---input元素--checked属性---属性值bool[true,false]
			*/
		   $("#getProBtn").click(function(){
			   // prop("checked") 获取元素的附加属性----------input中checked
			   var isChecked=$("#myCheckBox").prop("checked");
			   $("#output_three").text("复选框的值是："+isChecked);
		   });
		   /*  prop("checked",false)   取消选中  */
		   $("#setProBtn").click(function(){
			    $("#myCheckBox").prop("checked",false);  //  false布尔类型不加引号
		        $("#output_three").text("复选框的值是：flase");
		   });
		   // removeProp("checked")   取消选中---删除checked属性
		   $("#removeProBtn").click(function(){
		   		$("#myCheckBox").removeProp("checked");
		        $("#output_three").text("复选框的属性已经移除");
		   });
		   
		</script>
	</body>
</html>